<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>路由</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <!-- 1 官方路由 -->
    <!-- 2 从零开始简单的路由 -->
    <div id="app1" style="border: 1px dashed red;margin-bottom: 2px;">
    </div>
    <!-- 3 整合第三方路由 -->
    <script type="text/javascript">
      // 1 官方路由
      //   对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router 文档。


      // 2 从零开始简单的路由
      //   如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件：
      const NotFound = {template: '<p>Page not found</p>'}
      const Home = {template: '<p>Home page</p>'}
      const About = {template: '<p>About page</p>'}
      
      const routes = {
        '/': Home,
        '/about': About
      }
      
      var vm1 = new Vue({
        el: '#app1',
        data: {
          // currentRoute: window.location.pathname
          // currentRoute: "/",
          currentRoute: "/about"
        },
        computed: {
          ViewComponent () {
            return routes[this.currentRoute] || NotFound
          }
        },
        render (h) {return h(this.ViewComponent)}
      })

      // 3 整合第三方路由
    </script>
  </body>
</html>
